<template>
  <view>
    <MxyHeader title="批次管理" />
    <MxySearchBar v-model="query.name" placeholder="批次名称" @search="load(1)" @reset="query.name='';load(1)" />
    <view class="bar">
      <button @click="$refs.form.open()">+新增批次</button>
      <button @click="exportData('batch')">导出数据</button>
    </view>
    <MxyTable :columns="cols" :data="list" :total="total" :page-size="PAGE_SIZE" @page-change="load">
      <template #status="{row}">
        <text :class="row.status">{{ row.status==='active'?'进行中':'已结束' }}</text>
      </template>
      <template #action="{row}">
        <button size="mini" @click="$refs.form.open(row)">编辑</button>
        <button size="mini" type="warn" @click="del(row.id)">删除</button>
      </template>
    </MxyTable>
    <MxyPopupForm ref="form" title="批次" :fields="fields" @submit="submit" />
  </view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { getBatchList, addBatch, delBatch } from '@/common/api.js'
import { PAGE_SIZE } from '@/common/config.js'
const query = reactive({ name:'' })
const list  = ref([])
const total = ref(0)
const cols = [
  { label:'批次名称', key:'name' },
  { label:'开始时间', key:'startTime' },
  { label:'结束时间', key:'endTime' },
  { label:'状态', key:'status', slot:true },
  { label:'队伍数', key:'teamCount' },
  { label:'完成总结', key:'summaryCount' },
  { label:'操作', key:'action', slot:true, width:160 }
]
const fields = [
  { label:'批次名称', key:'name', required:true },
  { label:'开始时间', key:'startTime', type:'date', required:true },
  { label:'结束时间', key:'endTime', type:'date', required:true },
  { label:'描述', key:'desc', type:'textarea' }
]
const load = (p=1) => getBatchList({ page:p, ...query }).then(r => { list.value=r.list; total.value=r.total })
load(1)
const submit = d => addBatch(d).then(()=>{ uni.showToast({title:'保存成功'}); load(1) })
const del = id => uni.showModal({
  content:'确认删除？',
  success: r => r.confirm && delBatch(id).then(()=>load(1))
})
</script>
<style scoped>
.bar{ display:flex; gap:20rpx; padding:20rpx 24rpx; }
button{ background:#007aff; color:#fff; }
status{ color:#07c160; }
status.active{ color:#fa3534; }
</style>